<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>绘制原型 弧形</title>
	</head>

	<body style="text-align: center;">
		<canvas id="canvas" width="1000" height="500" style="border: 1px solid ;"></canvas>
	</body>
	<script>
		window.onload = function() {
			var canvas = document.querySelector('#canvas')
			if (canvas.getContext('2d')) {
				var context = canvas.getContext('2d');
			} else {
				alert('nagative!');
			};
			//			context.lineWidth = 5;
			//			context.strokeStyle = 'firebrick';
			//			context.arc(500, 250, 100, 0, 2 * Math.PI,false);
			//			context.stroke();
			//			context.fillStyle = 'beige';
			//			context.fill(); // 绘制一个圆形。
			
			
			for (var i = 0; i < 10; i++) {
				context.beginPath();
				context.arc(20 + (i * 100), 60, 40, 0, 2 * Math.PI * (i + 0.5) / 10, false);
				context.closePath();
				context.lineWidth = 5;
				context.strokeStyle = 'gold';
				context.stroke();
			};
			
			for (var i = 0; i < 10; i++) {
				context.beginPath();
				context.arc(20 + (i * 100), 160, 40, 0, 2 * Math.PI * (i + 0.5) / 10, false);
//				context.closePath();
				context.lineWidth = 5;
				context.strokeStyle = 'gold';
				context.stroke();
			};
			
			for (var i = 0; i < 10; i++) {
				context.beginPath();
				context.arc(20 + (i * 100), 260, 40, 0, 2 * Math.PI * (i + 0.5) / 10, false);
				context.closePath();//closePath 对fill 不起作用  会封闭路径。
				context.lineWidth = 5;
				context.fillStyle = 'goldenrod'
				context.fill();
			};
		}
	</script>

</html>